<template>
  <div class="typeBox">
    <el-card class="box-card">
      <div class="ablityBox">
        <span style="display:flex;flex-direction:row;margin-right:10px;">
          <el-input v-model="query.articleName" prefix-icon="el-icon-search" placeholder="关键词"></el-input>
          <el-button class="button" size="small" @click="getTableData" style="font-size:1.1em;">搜索</el-button>
        </span>
        <el-select clearable style="width:120px;" v-model="query.sortId" placeholder="文章分类" @change="getTableData">
          <el-option
            v-for="item in typeList"
            :key="item.type_id"
            :label="item.type_name"
            :value="item.type_id">
          </el-option>
        </el-select>
        <el-select style="width:120px;margin-left:10px;margin-right:10px;" v-model="query.status" placeholder="文章状态" @change="getTableData">
          <el-option label="已发布" :value="0">已发布</el-option>
          <el-option label="草稿箱" :value="1">草稿箱</el-option>
        </el-select>
        <el-button class="button" type="primary" icon="el-icon-plus" @click="articleAdd()"
          >新增文章</el-button>
      </div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          :data="tableData"
          height="100%"
          stripe
          size="small"
          header-cell-class-name="headerC"
          @sort-change="orderChange"
        >
          <el-table-column type="index" label="索引" width="100"> </el-table-column>
          <el-table-column prop="title" label="标题"> </el-table-column>
          <el-table-column prop="type_name" label="分类"> </el-table-column>
          <el-table-column prop="create_time" sortable="custom" label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.create_time.split('T')[0] + ' ' + scope.row.create_time.split('T')[1].split('.')[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" sortable="custom" label="更新时间">
            <template slot-scope="scope">
              <span>{{scope.row.update_time.split('T')[0] + ' ' + scope.row.update_time.split('T')[1].split('.')[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="!scope.row.status">已发布</span>
              <span v-else>草稿箱</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="toUpdate(scope.row.article_id)"
                >编辑
              </el-button>
              <el-popconfirm
                style="margin-left:10px;"
                confirm-button-text='是的'
                cancel-button-text='不了'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除这条类型吗？"
                @confirm="handleDelete(scope.row)"
              >
                <el-button slot="reference" type="info" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pageBox">
        <el-pagination
          background
          layout="sizes, prev, pager, next,->, total, slot"
          :total="total"
          :page-sizes="[8, 20, 30]"
          @current-change="pageChange"
          @size-change="sizeChange"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="修改文章"
        :visible.sync="showDialog"
        :destroy-on-close="true"
        :fullscreen="true"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary">确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { articleApi } from '../../apis/article'
import { articleTypeApi } from '../../apis/articleType'
const articleType = articleTypeApi()
const article = articleApi()
export default {
  name: 'ArticleList',
  data () {
    return {
      tableData: [],
      typeList: [],
      loading: false,
      query: {
        articleName: '',
        status: 0,
        sortId: null,
        page: 1,
        pageSize: 8,
        orderType: 1,
        orderValue: 1
      },
      total: 0,
      article: {
        article_id: 0,
        sort_id: 0,
        title: '',
        content: '',
        cover_img: '',
        create_time: '',
        update_time: '',
        status: 1
      },
      showDialog: false
    }
  },
  methods: {
    async getTableData () {
      this.loading = true
      await article.getArticle(this.query).then((res) => {
        if (res && res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    async getArticleType () {
      await articleType.getAllArticleType().then(res => {
        if (res && res.code === 200) {
          this.typeList = res.data
        }
      })
    },
    handleDelete (row) {
      article.deleteArticle({ id: row.article_id }).then(res => {
        if (res && res.code === 200) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
          this.getTableData()
        } else {
          this.$message({
            message: '删除失败！',
            type: 'error'
          })
        }
      })
    },
    sizeChange (val) {
      this.query.pageSize = val
      this.getTableData()
    },
    pageChange (val) {
      this.query.page = val
      this.getTableData()
    },
    // 新增文章
    articleAdd () {
      this.$router.push('/articlePublish')
    },
    toUpdate (id) {
      // showDialog = true
      this.$router.push({ path: '/articleUpdate', query: { id: id } })
    },
    orderChange (e) {
      if (e.prop === 'create_time') {
        this.query.orderType = 1
      } else {
        this.query.orderType = 0
      }
      if (e.order === 'ascending') {
        this.query.orderValue = 0
      } else {
        this.query.orderValue = 1
      }
      this.query.page = 1
      this.getTableData()
    }
  },
  async mounted () {
    await this.getTableData()
    await this.getArticleType()
  }
}
</script>

<style scoped>
.typeBox {
  padding: 10px;
  height: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  height: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.box-card::-webkit-scrollbar {
  display: none;
}
.tableBox {
  height: 480px;
}
.pageBox {
  height: 70px;
  display: flex;
  align-items: center;
}
.ablityBox{
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 10px;
}
</style>
